<template>
	<view>
		<pageheader :setting="settingdata"></pageheader>
		<view class="searchTop" :style="'top:'+navH+'px'">
			<picker @change="settype" :value="typeindex" :range="typearray">
				<view class="selectbox">
					<text>{{typearray[typeindex]}}</text>
					<u-icon name="arrow-down" color="#666666" size="24"></u-icon>
				</view>
			</picker>
			<view class="searchContent">
				<u-icon name="search" color="#B1B8C8" size="28" class="search_icon"></u-icon>
				<u-input v-model="searchvalue" placeholder="输入搜索内容" :type="type" confirm-type="search"
					@confirm='keyselect' @input="bindchange" :border="false" placeholderStyle="color:#B1B8C8"
					:focus="true" class="search_" :clearable="false" />
			</view>
			<text class="cancel" @click="keyselect">搜索</text>
		</view>

		<view v-if="searchvalue==''">
			<view class="histitlebox" v-if="lately.length>0">
				<text class="histitle">历史搜索</text>
				<text class="iconfont icon-cangpeitubiao_shanchu" @click="remstorage"></text>
			</view>
			<view class="searchvalues" v-if="lately.length>0">
				<navigator :url="'/chat/result?typeindex='+typeindex+'&searchKey='+item" hover-class="none"
					class="searchone" v-for="(item,index) in lately" :key="index">{{item}}</navigator>
			</view>
		</view>

		<view v-if="searchvalue==''">
			<view class="hotstitlebox">
				<text class="hotstitle">热门搜索</text>
			</view>
			<view class="searchvalues">
				<navigator :url="'/chat/result?typeindex='+typeindex+'&searchKey='+item.title" hover-class="none"
					class="searchone" v-for="(item,index) in hotsdata" :key="index">{{item.title}}</navigator>
			</view>
		</view>

		<view class="alllist" v-if="searchvalue!=''">
			<scroll-view scroll-y="true" class="scroll" @scrolltolower="lower"
				:style="'height:'+'calc(100vh'+' - '+(navH+70)+'px)'">
				<view class="towline" v-for="(item,index) in ification" :key="index"
					@click="setparent(item.id,item.name)">
					{{item.name}}
				</view>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	import App from '@/App.vue';
	var _this, $paginator;
	export default {
		data() {
			return {
				typearray: ["供应", "求购"],
				typeindex: 0,
				settingdata: {
					name: '搜索',
					bgColor: '#fff',
					titleColor: '#000000',
					showNav: true,
					showTypes: 0,
					position: "search"
				},
				// 历史
				lately: [],
				searchvalue: '',
				hotsdata: [], //热门搜索

				navH: App.globalData.navHeight,
				// 分类列表
				ification: [],
				selectswitch: false, //分类的搜索显示
			}
		},
		onLoad(e) {
			_this = this
			_this.getdata()
		},
		onShow() {
			_this.lately = wx.getStorageSync("lately") ? wx.getStorageSync("lately").reverse() : this.lately
		},
		methods: {
			// 获取数据
			getdata() {
				_this.$api.get("gethotsearch", {}).then(data => {
					_this.hotsdata = data
				});
			},
			// 搜索输入的内容
			keyselect: function() {
				let newkey = _this.searchvalue
				console.log(newkey.length)
				if (newkey.length > 0) {
					let lately = wx.getStorageSync("lately");
					console.log(lately, 1)
					lately = lately ? lately : [];
					lately.indexOf(newkey) >= 0 ? lately.splice(lately.indexOf(newkey), 1) : "";
					console.log(lately, 2)

					lately.push(newkey)

					console.log(lately, 3)
					wx.setStorageSync("lately", lately)
					_this.searchvalue = ""
					wx.redirectTo({
						url: '/chat/result?typeindex=' + _this.typeindex + '&searchKey=' + newkey
					})
				} else {
					wx.showToast({
						title: '请输入查询信息',
						icon: 'none',
						duration: 1000
					})
				}

			},
			// 清空历史
			remstorage: function() {
				_this.lately = []
				wx.removeStorageSync("lately")
			},
			// 设置类型
			settype(e) {
				_this.typeindex = e.target.value
			},
			toback: function() {
				uni.navigateBack({
					delta: 1
				})
			},

			// 滚动到底部
			lower: function(e) {
				console.log(e)
				$paginator.nextPager(() => {
					_this.getclass()
				})
			},

			// 显示分类
			getclass: function(firstLoad = false) {
				$paginator.getData("classification", {
					key: _this.searchvalue,
					pagesize: 20
				}, (data) => {
					if (firstLoad) {
						_this.ification = data.list ? data.list : []
					} else {
						_this.ification = _this.ification.concat(data.list)
					}
				});
				if (_this.searchvalue.length > 0) {
					_this.selectswitch = true
				} else {
					_this.selectswitch = false
				}
			},

			bindchange(e) {
				console.log(e, e == "")
				_this.searchvalue = e
				if (e == "") {
					_this.ification = []
				} else {
					$paginator = new _this.$paginator(_this.$api)
					_this.getclass(true)
				}
			},

			setparent(id, name) {
				let cateName = name.split('-->')?.[1] || name
				wx.redirectTo({
					url: '/chat/result?typeindex=' + _this.typeindex + '&cate_id=' + id + '&cate_name=' + cateName
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.searchTop {
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;

		.selectbox {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin: 0 31rpx 0 24rpx;

			text {
				font-size: 26rpx;
				margin-right: 5rpx;
			}
		}

		.searchContent {
			width: 501rpx;
			height: 74rpx;
			border-radius: 37rpx;
			background: #f1f1f1;
			display: flex;
			flex-direction: row;
			align-items: center;

			.search_icon {
				margin-left: 32rpx;
			}

			.search_ {
				color: #2C3240;
				font-size: 26rpx;
				flex: 1;
				margin: 0 14rpx;
			}
		}

		.cancel {
			margin-left: 37rpx;
			color: #999999;
			font-size: 26rpx;
		}
	}

	.histitlebox {
		margin-top: 52rpx;
		padding: 0 28rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		.histitle {
			color: #2C3240;
			font-size: 32rpx;
			font-weight: bold;
		}

		.iconfont {
			font-size: 32rpx;
			color: #B1B8C8;
		}
	}

	.searchvalues {
		margin-top: 16rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		.searchone {
			padding: 0 59rpx;
			height: 70rpx;
			border-radius: 35rpx;
			line-height: 70rpx;
			background-color: #EEEEEE;
			font-size: 26rpx;
			color: #2C3240;
			margin: 19rpx 0 0 20rpx;
		}
	}

	.hotstitlebox {
		margin-top: 92rpx;
		padding: 0 28rpx;

		.hotstitle {
			color: #2C3240;
			font-size: 32rpx;
			font-weight: bold;
		}
	}


	.alllist {
		margin: 0 25rpx;
		display: flex;
		flex-direction: column;

		.scroll {
			// height: 900rpx;
		}

		.towline {
			padding: 30rpx;
			border-bottom: 2rpx solid #E6E6E6;
			color: #222222;
			font-size: 30rpx;
		}
	}
</style>
